<template>
  <div>
    <el-row type="flex" justify="end" class="head-title">
      <div>资产总额</div>
      <div>营业收入</div>
      <div>利润总额</div>
      <div>平均投资回报率</div>
    </el-row>
    <el-table :data="gridData" :border="false">
      <el-table-column
        v-for="item in column"
        :key="item.property"
        :property="item.property"
        :label="item.label"
        :render-header="renderHeader"
        align="center"
      >
        <template slot-scope="scope">
          <div :class="{ blue: item.property !== 'gsmc' }">
            <div
              class="pointer"
              v-if="['gsmc'].includes(item.property)"
              @click="hanldCompanyName(scope.row)"
            >
              {{ scope.row[item.property] }}
            </div>
            <div
              v-else-if="
                ['yysrWcl', 'lrzeWcl', 'hblSj'].includes(item.property) &&
                scope.row[item.property]
              "
            >
              {{ scope.row[item.property] }}<span class="grey">%</span>
            </div>
            <div
              v-else-if="
                !['gsmc'].includes(item.property) && scope.row[item.property]
              "
            >
              {{ Math.round((scope.row[item.property] / 10000) * 100) / 100 }}
              <span class="grey">亿</span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "FinancialTableModal",
  data() {
    return {
      column: [
        { property: "gsmc", label: "公司名称" },
        { property: "zczeSj", label: "实际" },
        { property: "yysrMb", label: "目标" },
        { property: "yysrSj", label: "实际" },
        { property: "yysrWcl", label: "完成率" },
        { property: "lrzeMb", label: "目标" },
        { property: "lrzeSj", label: "实际" },
        { property: "lrzeWcl", label: "完成率" },
        { property: "hblMb", label: "目标" },
        { property: "hblSj", label: "实际" },
      ],
      gridData: [
        {
          gsmc: "浙商工服",
          zczeSj: 90653,
          yysrMb: 16000,
          yysrSj: "",
          yysrWcl: "",
          lrzeMb: "",
          lrzeSj: "",
          lrzeWcl: "",
          hblMb: "",
          hblSj: "",
        },
        {
          gsmc: "交投智科",
          zczeSj: 1521,
          yysrMb: 8000,
          yysrSj: "",
          yysrWcl: "",
          lrzeMb: "",
          lrzeSj: "",
          lrzeWcl: "",
          hblMb: "",
          hblSj: "",
        },
        {
          gsmc: "中车车辆",
          zczeSj: 151060,
          yysrMb: 141000,
          yysrSj: 120000,
          yysrWcl: "85.1",
          lrzeMb: 5700,
          lrzeSj: 4177,
          lrzeWcl: "73.3",
          hblMb: "",
          hblSj: "",
        },
        {
          gsmc: "中车电气",
          zczeSj: 10792,
          yysrMb: 4460,
          yysrSj: 4460,
          yysrWcl: "100.0",
          lrzeMb: 166,
          lrzeSj: 166,
          lrzeWcl: "100.0",
          hblMb: "",
          hblSj: "",
        },
        { gsmc: "温州动车所", zczeSj: "", yysrMb: "", yysrSj: "", yysrWcl: "" },
        {
          gsmc: "景宁上标",
          zczeSj: 8767,
          yysrMb: 1940,
          yysrSj: 1829,
          yysrWcl: "94.3",
          lrzeMb: 300,
          lrzeSj: 300,
          lrzeWcl: "100.0",
          hblMb: "",
          hblSj: "",
        },
        {
          gsmc: "浙江中铁",
          zczeSj: 33015,
          yysrMb: 31000,
          yysrSj: 25000,
          yysrWcl: "80.6",
          lrzeMb: 1600,
          lrzeSj: 550,
          lrzeWcl: "34.4",
          hblMb: "",
          hblSj: "",
        },
        {
          gsmc: "加西贝拉",
          zczeSj: 723603,
          yysrMb: 870000,
          yysrSj: 870000,
          yysrWcl: "100.0",
          lrzeMb: 29000,
          lrzeSj: 36000,
          lrzeWcl: "124.1",
          hblMb: "",
          hblSj: "",
        },
        {
          gsmc: "华睿科技",
          zczeSj: 54608,
          yysrMb: 48000,
          yysrSj: 30000,
          yysrWcl: "62.5",
          lrzeMb: 8000,
          lrzeSj: 5000,
          lrzeWcl: "62.5",
          hblMb: "",
          hblSj: "",
        },
        {
          gsmc: "朗进科技",
          zczeSj: 168392,
          yysrMb: "",
          yysrSj: "",
          yysrWcl: "",
          lrzeMb: "",
          lrzeSj: "",
          lrzeWcl: "",
          hblMb: "",
          hblSj: "",
        },
        {
          gsmc: "永安期货",
          zczeSj: 6654365,
          yysrMb: "",
          yysrSj: "",
          yysrWcl: "",
          lrzeMb: "",
          lrzeSj: "",
          lrzeWcl: "",
          hblMb: "",
          hblSj: "",
        },
      ],
    };
  },
  methods: {
    renderHeader(h, { column, $index }) {
      if ($index) {
        return <div class="text-gradient">{column.label}</div>;
      }
      return null;
    },
    hanldCompanyName(item) {
      this.$emit("onCompanyName", item);
    },
  },
};
</script>

<style lang="scss">
// 弹窗
.financial-table-modal {
  .el-dialog__body {
    .head-title {
      margin-bottom: 14px;
      > div {
        height: 38px;
        line-height: 38px;
        background: linear-gradient(
          90deg,
          rgba(72, 143, 255, 0) 0%,
          #488fff 52%,
          rgba(5, 32, 115, 0) 100%
        );
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        color: #ffffff;
        &:nth-child(1) {
          width: 157px;
        }
        &:nth-child(2) {
          width: 471px;
        }
        &:nth-child(3) {
          width: 471px;
        }
        &:nth-child(4) {
          width: 314px;
        }
      }
    }
  }
  .hit {
    height: 40px;
    line-height: 40px;
    text-align: right;
  }
}
</style>
